<template>
  <page-header-wrapper>
    <a-modal :visible="previewPhotoVisible" :footer="null" @cancel="handlePhotoCancel">
      <img alt="example" style="width: 100%" :src="updateInfo.imgUrl"/>

      <a-form layout="horizontal">

        <a-form-item>
          <a-row type="flex" justify="space-around" :gutter="[12,12]" style="margin-top: 1px">
            <a-col>
              <a-button type="danger" shape="round" v-if="updateInfo.state==1" @click="changeBannerState(2)">
                禁用
              </a-button>
              <a-button type="primary" shape="round" v-else @click="changeBannerState(1)">
                启用
              </a-button>
            </a-col>
            <a-col>
              <a-button type="danger" @click="toDeleteBanner">
                删除
              </a-button>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="URL" :label-col="{span: 4}" :wrapper-col="{ span: 20 }">
          <div>
            <a-input size="large" v-model="updateInfo.url">
            </a-input>
            <a-button slot="enterButton" type="primary" @click="setBannerUrl">
              修改
            </a-button>
          </div>

        </a-form-item>
      </a-form>


      <a-row>
        <a-col>

        </a-col>
      </a-row>
    </a-modal>
    <a-card>
      <a-form layout="inline">
        <a-form-item label="添加图片">
          <a-upload
            name="file"
            :multiple="false"
            :before-upload="uploadPhoto"
            :preview-file="()=>{}"
            :showUploadList="false"
          >
            <a-button type="primary">上传图片</a-button>
          </a-upload>
        </a-form-item>
      </a-form>
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="已启用图片">
          <a-row type="flex" :gutter="[8,8]" v-if="usedNum>0">
            <a-col v-for="(banner,pos) in bannerList" v-if="banner.state==1">
              <a-card style="width: 200px" hoverable>
                <img
                  slot="cover"
                  style="height: 200px;object-fit: cover;"
                  alt="example"
                  :src="banner.imgUrl"
                  @click="showPreview(pos)"
                />

              </a-card>
            </a-col>
          </a-row>
          <div v-else>
            <a-empty/>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card>
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="未启用图片">
          <a-row type="flex" :gutter="[8,8]" v-if="no_usedNum>0">
            <a-col v-for="(banner,pos) in bannerList" v-if="banner.state==2">
              <a-card style="width: 200px" hoverable>
                <img
                  slot="cover"
                  style="height: 200px;object-fit: cover;"
                  alt="example"
                  :src="banner.imgUrl"
                  @click="showPreview(pos)"
                />
              </a-card>
            </a-col>
          </a-row>
          <div v-else>
            <a-empty/>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import {deleteBanner, getBanner, insertBanner, updateBanner, uploadPhoto} from "@/api/banner";

export default {
  name: "main",
  data() {
    return {
      previewPhotoVisible: false,
      previewImage: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
      queryParam: {
        phone: ''
      },
      updateInfo:{

      },
      bannerList:[]
    }
  },
  mounted() {
    this.refreshBanner();

    console.log(window.location)
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    handlePhotoCancel() {
      this.previewPhotoVisible = false;
    },
    refreshBanner(){
      let _this=this;
      getBanner({
      }).then((res)=>{
        _this.bannerList=res.data
      })
    },
    showPreview(pos){
      this.updateInfo=this.bannerList[pos];
      console.log(this.updateInfo)
      this.previewPhotoVisible=true
    },
    uploadPhoto(file){
      let _this=this;
      let form = new FormData();
      form.append('photo',file)
      uploadPhoto(form).then((res)=>{
        insertBanner({
          imgUrl:res.data,
          state:2
        }).then(()=>{
          _this.refreshBanner()
        })
      })
    },
    changeBannerState(state){
      let _this=this;
      updateBanner({
        id:this.updateInfo.id,
        state
      }).then(()=>{
        _this.updateInfo.state=state
        _this.refreshBanner()

      })
    },
    toDeleteBanner(){
      let _this=this;
      deleteBanner({
        id:this.updateInfo.id
      }).then(()=>{
        _this.refreshBanner()
        _this.previewPhotoVisible = false;
      })
    },
    setBannerUrl(){
      let _this=this;
      updateBanner({
        id:this.updateInfo.id,
        url:this.updateInfo.url
      }).then(()=>{
        _this.refreshBanner()
      })
    }
  },
  computed:{
    usedNum(){
      let i=0;
      for (let j = 0; j < this.bannerList.length; j++) {
        if(this.bannerList[j].state==1)i++
      }
      return i
    },
    no_usedNum(){
      let i=0;
      for (let j = 0; j < this.bannerList.length; j++) {
        if(this.bannerList[j].state==2)i++
      }
      return i
    }
  }
}
</script>

<style scoped>

</style>